<template>
  <div class="commentComponent">
    <!--留言-->
    <el-row class="comment">
      <el-row>
        <el-col :span="1">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        </el-col>
        <el-col :span="20">
          <el-row>
            <span>姓名</span>+<span>浏览器</span>
          </el-row>
          <el-row>
            内容
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1">
          <i class="el-icon-position">地点</i>
          <i class="el-icon-time">时间</i>
          <el-link v-if="lastClickId!==-1" style="height: 16px" type="primary" @click="clickLink(-1)" :underline="false">回复</el-link>
          <el-link v-else style="height: 16px" type="primary" @click="clickLink(-1)" :underline="false">收起</el-link>
        </el-col>
      </el-row>
    </el-row>
    <!--评论-->
    <el-row class="comment">
      <el-col :offset="1" :span="22">
        <hr/>
        <el-row v-for=" (item,index) in testItemList" :key="index">
          <el-col :span="1">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          </el-col>
          <el-col :span="20">
            <el-row>
              姓名+回复人+回复内容
            </el-row>
            <el-row>
              <i class="el-icon-position">地点</i>
              <i class="el-icon-time">时间</i>
              <el-link v-if="lastClickId!==item.id" style="height: 16px" type="primary" @click="clickLink(item.id)"
                       :underline="false">回复
              </el-link>
              <el-link v-else style="height: 16px" type="primary" @click="clickLink(item.id)" :underline="false">收起
              </el-link>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!--回复留言板-->
    <el-row class="comment" v-if="clickFlag">
      <el-col :offset="1" :span="22">
        <message-edit-component/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import messageEditComponent from './messageEditComponent'

export default {
  name: 'commentComponent',
  data: function () {
    return {
      testItemList: [{id: 1}, {id: 2}],
      clickFlag: false,
      lastClickId: undefined
    }
  },
  methods: {
    clickLink (itemId) {
      if (this.lastClickId === itemId) {
        this.clickFlag = false
        this.lastClickId = undefined
      } else {
        if (!this.clickFlag) {
          this.clickFlag = !this.clickFlag
        }
        this.lastClickId = itemId
      }
    }
  },
  components: {messageEditComponent}
}
</script>

<style scoped>
  .commentComponent {
    margin-top: 10px;
    text-align: left;
  }

  .comment {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-link {
    font-family: element-icons, fantasy;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    height: 100%;
  }
</style>
